<template>
  <el-table-column
    :prop="column.prop"
    :label="column.label"
    :key="index"
    :type="column.type"
    :align="column.align"
    :width="column.width"
    :resizable="column.resizable"
    :class-name="column.className"
    :show-overflow-tooltip="
      column.tooltip === undefined ? true : column.tooltip
    "
    :render-header="column.renderHeader"
    :min-width="column.minWidth"
    :fixed="column.fixed"
    :filters="column.filters"
    :filter-method="column.filterMethod"
    :label-class-name="column.labelClassName"
  >
    <template slot-scope="scope">
      <template v-if="!column.render">
        <template v-if="column.formatter">
          <span v-html="column.formatter(scope.row, column)"></span>
        </template>
        <template v-else>
          <span v-if="!column.valueType">{{ scope.row[column.prop] }}</span>
          <el-image
            v-if="column.valueType === 'image' && scope.row[column.prop]"
            :src="column.formatUrl(scope.row[column.prop])"
            style="width: 80px; height: 80px"
            :preview-src-list="
              new Array(column.formatUrl(scope.row[column.prop]))
            "
          >
          </el-image>
          <el-button
            v-if="column.valueType === 'button'"
            :type="column.btn.type"
            :size="column.btn.size"
            @click.native.prevent="
              column.btn.method && column.btn.method(scope.row)
            "
          >
            {{ column.btn.label }}
          </el-button>
          <el-checkbox
            v-if="column.valueType === 'checkbox'"
            v-model="scope.row[column.prop]"
            :true-label="column.box.trueLabel"
            :false-label="column.box.falseLabel"
            @change="column.box.method && column.box.method(scope.row)"
            :disabled="column.disabled || (column.box.disabled && column.box.disabled(scope.row))"
            >{{ column.box ? column.box.label : "" }}</el-checkbox
          >
          <el-input
            v-if="column.valueType === 'input'"
            v-model="scope.row[column.prop]"
            :min="column.min"
            :type="column.type"
            @change="column.method && column.method(scope.row)"
            @input="column.input && column.input(scope.row)"
            clearable
          ></el-input>
          <el-select
            v-if="column.valueType === 'select'"
            v-model="scope.row[column.prop]"
            :disabled="column.disabled"
            :placeholder="column.placeholder"
            clearable
            @change="column.method && column.method(scope.row)"
          >
            <el-option
              v-for="item in column.select.data_list"
              :key="item[column.select.key]"
              :label="item[column.select.label]"
              :value="item[column.select.value]"
            ></el-option>
          </el-select>
          <el-input-number
            v-if="column.valueType === 'inputNumber'"
            v-model="scope.row[column.prop]"
            :step="column.box.step"
            :min="column.box.min"
            :max="column.box.max"
            :size="column.box.size"
            :step-strictly="column.box.strictly"
            @change="column.method && column.method(scope.row)"
          />
          <el-switch
            v-if="column.valueType === 'switch'"
            v-model="scope.row[column.prop]"
            :disabled="column.disabled"
            :active-color="column.activeColor || '#13ce66'"
            :inactive-color="column.inactiveColor || '#C0CCDA'"
            :active-value="column.activeValue || 1"
            :inactive-value="column.inactiveValue || 0"
            :active-text="column.activeText"
            :inactive-text="column.inactiveText"
            @change="column.method && column.method(scope.row)"
          >
          </el-switch>
        </template>
      </template>
      <template v-else>
        <expand-dom
          :column="column"
          :row="scope.row"
          :render="column.render"
          :index="index"
        ></expand-dom>
      </template>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "BaseTableColumn",
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        };
        if (ctx.props.column) {
          params.column = ctx.props.column;
        }
        return ctx.props.render(h, params);
      },
    },
    expandHeader: {
      functional: true,
      props: {
        row: Object,
        headerRender: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        };
        if (ctx.props.column) {
          params.column = ctx.props.column;
        }
        if (ctx.props.headerRender) {
          return ctx.props.headerRender(h, params);
        } else {
          return h("span", ctx.props.column.label);
        }
      },
    },
    popover: {
      functional: true,
      props: {
        content: Function,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        return ctx.props.content(h, ctx.props.column);
      },
    },
  },
  props: {
    col: {
      type: Object,
      default() {
        return {};
      },
    },
    index: {
      type: Number,
      default() {
        return -1;
      },
    },
  },
  data() {
    return {
      column: {},
    };
  },
  watch: {
    col: {
      handler() {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    init() {
      this.column = $.extend({}, this.col);
    },
  },
};
</script>

<style scoped>
</style>
